<template>
   <div>
       <div v-if="diskind">
         <mt-popup
               v-model="popupVisible"
               popup-transition="popup-fade"
               position="top" style="z-index:11;">
             <mt-header fixed title="K线">
               <mt-button icon="back" @click="close" slot="left">关闭</mt-button>
                 <mt-button slot="right" @click.native="popupVisible4 = true"> 操作 </mt-button>   <!-- @click="gotoBuy"-->
               <!-- <mt-button slot="right" @click="Condition">条件单</mt-button> -->
             </mt-header>
           <div class="klineContainer" id="kline_container">
           </div>
        </mt-popup>
           <mt-popup v-model="popupVisible4" position="bottom" class="mint-popup-4">
             <div class="popup_top" @click="gotoBuy">购买</div>
             <div class="popup_top" @click="Singlesetup">条件单设置</div>
    </mt-popup>
        </div>
   </div>
</template>
<script>
import { mapState, mapGetters } from "vuex";
import { Popup } from "mint-ui";
export default {
  name: "echart",
  data() {
    return {
      kline: {},
      product_item: {},
      popupVisible: false,
      diskind: true,
      popupVisible4: false
    };
  },
  beforeDestroy() {
    // console.log("echart beforeDestroy");
  },
  created() {},
  mounted() {
    let product_item = this.getProductItem();
    if (!product_item) {
      return;
    }
    var symbol = product_item.code;
    this.chartInit();
    kline.setSymbol(symbol, symbol);
  },
  computed: {
    ...mapGetters(["getOneProduct"])
  },
  watch: {
    getOneProduct(product) {
      this.triggerKline();
    }
  },
  components: {
    Popup
  },
  methods: {
    close() {
      this.popupVisible = false;
    },
    triggerKline(product) {
      this.popupVisible = true;
      let product_item = this.getProductItem();
      if (!product_item) {
        return;
      }
      var symbol = product_item.code;
      this.chartInit();
      kline.setSymbol(symbol, symbol);
    },
    getProductItem() {
      this.product_item = this.$store.state.one_product;
      if (!this.product_item.code) {
        this.product_item = this.$store.state.product_list[0];
      }
      return this.product_item;
    },
    chartInit() {
      let that = this;
      var _token = localStorage.getItem("_token");
      let product_item = this.getProductItem();
      if (!product_item || !product_item.code) {
        return;
      }
      var name = product_item.name;
      var symbol = product_item.code;
      let server_url =
        that.$serverUrl +
        `/futures_products/7?real=1&_token=${_token}&token=iinopeneve9ejf9ejfexjcs9cjw9kwd9`;

      window.kline = new this.$kline({
        element: "#kline_container",
        symbol: symbol,
        symbolName: name,
        type: "poll", // poll/stomp
        url: server_url,
        disableFirebase: true,
        reverseColor: true,
        showTrade: false,
        debug: false,
        ranges: ["1h", "30m", "15m", "5m", "1m", "line"],
        theme: "dark",
        intervalTime: 1000000000000000,
        onResize: function(width, height) {
          // console.log("chart resized: " + width + " " + height);
        }
      });
      // kline.setShowTrade(false);
      kline.draw();
      // kline.pause();
      kline.resize();
    },
    Condition() {
      this.diskind = false;
    },
   gotoBuy() {   //购买
      // this.popupVisible = false;
      let product_item = this.getProductItem();
      // this.$store.commit("setOneSaleProduct", product_item);
        // console.log(product_item)
       this.$router.push({
        path: "purchase",
        query: {
          value: product_item.code,
          value2:product_item.id,
          value3:product_item.done_price,
        }
      });
    },
    Singlesetup() { //条件单设置
      var that = this;
       let product_item = this.getProductItem();
       // console.log(product_item.code)
       this.$router.push({
        path: "appCondition",
        query: {
          value: product_item.code,
          value2:product_item.id,
        }
      });
    }
  }
};
</script>


<style>
.klineContainer {
}
#chart_toolbar {
  /* display: none; */
}
.mint-popup-4 {
  width: 750px;
  height: 180px;
}
.popup_top {
  width: 750px;
  height: 90px;
  border: #f4f4f4 solid 1px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 28px;
  color: #333333;
}
</style>
